<template>
    <div class="mod-role">
        <el-card class="box-card">
            <el-form :inline="true" :model="dataForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="dataForm.name" clearable placeholder="菜单名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="openDialog">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="dataList" border style="width: 100%" row-key="menuId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="menuId" label="ID" width="150">
                </el-table-column>
                <el-table-column prop="parentId" label="父菜单编号" width="150">
                </el-table-column>
                <el-table-column prop="name" label="菜单名称" width="180">
                </el-table-column>
                <el-table-column prop="path" label="路由地址" width="280">
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="180">
                </el-table-column>
                <el-table-column prop="orderNum" label="序号" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper" style="margin-top:30px;">
            </el-pagination>
        </el-card>
        <!-- <el-dialog :title="this.dataDialogForm.menuId != 0 ? '更新角色' : '新增角色'" width="35%"
            :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="dataDialogForm" :rules="rules" ref="ruleForm">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="dataDialogForm.name" placeholder="角色名称" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="描述信息" :label-width="formLabelWidth" prop="remark">
                    <el-input type="textarea" v-model="dataDialogForm.remark" placeholder="描述信息"
                        style="width:300px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmitFormData('ruleForm')">确 定</el-button>
            </div>
        </el-dialog> -->
    </div>
</template>
<script>
export default {
    name: 'SysMenu',
    data() {
        // var checkname = (rule, value, callback) => {
        //     if (this.dataDialogForm.menuId !== 0) {
        //         callback();
        //     } else if (value === '') {
        //         callback(new Error('请输入名称'));
        //     } else {
        //         //重命名校验
        //         this.$http.get("/sys/sysRole/checkname?name=" + value).then((res) => {
        //             if (res.data.data === 'fail') {
        //                 //可以使用
        //                 callback();
        //             } else {
        //                 callback(new Error('名称重复'));
        //             }

        //         })
        //     }
        // };
        return {
            dataForm: {
                name: "",
            },
            dataDialogForm: {
                menuId: 0,
                name: "",
                // remark: "",
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 5,
            totalPage: 0,
            dataListLoading: false,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            dialogFormSubmitVisible: false,
            // rules: {
            //     name: [
            //         { validator: checkname, trigger: 'blur' }
            //     ],
            //     remark: [
            //         { required: true, message: '请输入备注', trigger: 'blur' }
            //     ]
            // }
        }
    }, methods: {
        sizeChangeHandle(val) {
            // alert(val)
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        getDataList() {
            if (this.dataListLoading) {
                return;
            }
            this.dataListLoading = true;
            const params = {
                params: {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    name: this.dataForm.name
                }
            }
            this.$http.get("/sys/sysMenu/List", params).then((res) => {
                // console.log(res.data)
                this.dataList = res.data.data.list;
                this.totalPage = res.data.data.totalCount;
                this.dataListLoading = false;
                this.dialogFormSubmitVisible = false
            })
        }, handleEdit(index, item) {
            //打开窗口
            this.dialogFormVisible = true;
            this.dataDialogForm.menuId = item.menuId;
            this.dataDialogForm.name = item.name;
            // this.dataDialogForm.remark = item.remark;
        }, handleDelete(index, item) {
            this.$confirm('此操作将永久角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (this.dialogFormSubmitVisible) {
                    return;
                }
                this.dialogFormSubmitVisible = true;
                this.$http.get("/sys/sysRole/deleteRole?menuId=" + item.menuId).then((res) => {
                    if(res.data.data === '0'){
                        this.$message({
                            type:"warning",
                            message:"不允许删除"
                        })
                    }else{
                        this.$message({
                        type: "success",
                        message: "删除成功"
                    })
                    }
                    this.dialogFormVisible = false;
                    this.dialogFormSubmitVisible = false;
                    //刷新数据
                    this.getDataList();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        openDialog() {
            //打开窗口
            this.dialogFormVisible = true;
            this.dataDialogForm.menuId = 0;
            this.dataDialogForm.name = '';
            // this.dataDialogForm.remark = '';
        },
        closeDialog() {
            //清空添加的表单数据
            this.dataDialogForm = {
                menuId: 0,
                name: "",
                // remark: "",
            }
        },
        handleSubmitFormData(formName) {
            this.updateRole(formName);
        }, updateRole(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.dialogFormSubmitVisible) {
                        return
                    }
                    this.dialogFormSubmitVisible = true
                    this.$http.post('/sys/sysRole/save', this.dataDialogForm).then((res) => {
                        this.dialogFormVisible = false;
                        //清空添加的表单数据
                        this.dataDialogForm = {
                            menuId: 0,
                            name: "",
                            // remark: "",
                        },
                            this.dialogFormSubmitVisible = false;
                        //刷新数据
                        this.getDataList();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }, mounted() {
        this.getDataList();
    }
}
</script>